import './App.css'
import React, { Component } from 'react'
import Header from './Header/Header'
import List from './List/List'
import Footer from './Footer/Footer'

export default class App extends Component {
  state = {
      todos: [
        {id: '001', name:'起床', done: true},
        {id: '002', name:'吃早饭', done: false},
      ]
  }
  addItem = (itemObj)=>{
    const {todos} = this.state
    var newTodos = [itemObj, ...todos]
    this.setState({todos: newTodos})
  }
  changeItem = (itemId, done)=>{
    const {todos} = this.state
    const newTodos = todos.map(item=>{
      if(item.id===itemId){
        return {...item, done}
      }else{
        return item
      }
    })
    this.setState({todos: newTodos})
  }
  deleteItem = (itemId)=>{
    const {todos} = this.state
    const newTodos = todos.filter(item=>item.id!=itemId)
    this.setState({todos: newTodos})
  }
  deleteMulti = ()=>{
    const {todos} = this.state
    const newTodos = todos.filter(item=>!item.done)
    this.setState({todos: newTodos})
  }
  checkAll = ()=>{
    console.log(1)
    const {todos} = this.state
    const doneCount = todos.reduce((pre,item)=>pre + (item.done?1:0), 0)
    var newTodos
    if(doneCount===todos.length){
      newTodos = todos.map(item=>{
        return {...item,done:false}
      })
    }else{
      newTodos = todos.map(item=>{
        return {...item,done:true}
      })
    }
    this.setState({todos: newTodos})
  }
  render() {
    const {todos} = this.state
    return (
      <div>
        <Header addItem={this.addItem}/>
        <List todos={todos} changeItem={this.changeItem} deleteItem={this.deleteItem} />
        <Footer deleteMulti={this.deleteMulti} todos={todos} checkAll={this.checkAll} />
      </div>
    )
  }
}